<template>
  <div>
    <div class="topheader">
      <div class="img">
        <img :src="coverImgUrl" alt="" />
      </div>
      <div class="title">{{ list.name }}</div>
      <div class="button">
        <span class="iconfont icon-xiangzuo" @click="beforePage"></span>
        排行榜
        <!-- {{ list.tags[0] }} -->
        <!-- <span v-for="(key,i) in list.tags" :key="i">{{key}}</span> -->
      </div>
    </div>
    <div class="musiclist" ref="musiclist">
      <dl>
        <dt @click="playAll">
          <i class="iconfont icon-bofang"> </i>
          <!-- 播放全部<span>（共10首）</span> -->
          播放全部<span>（共{{ list.length }}首）</span>
          <span :class="['iconfont', 'icon-tianjiadingdan1', {'reds':flag}]" @click="addSongs"></span>
        </dt>
        <dd
          v-for="(item, index) in list"
          :key="index"
          @click="setId(item.id, index)"
        >
          <h1>{{ index + 1 }}</h1>
          <div class="info">
            <h2>{{ item.name }}</h2>
            <h3>
              <span v-for="(key, index) in item.ar" :key="index"
                >{{ key.name }}&nbsp;&nbsp;</span
              >
            </h3>
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
import { getPlaylistDetail, } from "../../api/rank";
// import { getPlaylistDetail,getPlaylistSubscribe } from "../../api/rank";
import BScroll from "@better-scroll/core";

export default {
  props: ["rindex", "preindex"],
  data() {
    return {
      list: [
        {
          id:null,
        }
      ],
      coverImgUrl: null,
      flag:false,
    };
  },
  methods: {
    // 获取排行榜数据
    getPlaylistDetailFn(){
      getPlaylistDetail({ id: this.$route.query.id }).then((data) => {
      this.list = data.playlist.tracks;
      this.coverImgUrl = data.playlist.coverImgUrl;
        // console.log("歌单列表",data);
    });
    },
    // 传入类型和歌单 id 可收藏歌单或者取消收藏歌单
    // /playlist/subscribe?t=1&id=106697785
    // t : 类型,1:收藏,2:取消收藏 id : 歌单 id
    // getPlaylistSubscribeFn(){
    //   getPlaylistSubscribe({t:1 ,id:this.$route.query.id}).then(data=>{
    //     console.log(data);
    //   })
    // },
    setId(id) {
      this.$emit("get-player-id", id);
    },
    // 点击播放全部，把这个系列的所有歌曲放入列表
    playAll() {
      this.$emit("get-play-all-id", this.$route.query.id);
      // this.$emit("get-player-id", this.lists[0].id); //播放歌曲id。播放第一首
    },
    beforePage() {
      this.$router.go(-1);
    },
    // 点击收藏歌单
    addSongs(){
        // console.log("iidid",this.$route.query.id);

      this.flag =!this.flag;
      if(this.flag){
        // this.getPlaylistSubscribeFn()
      }else{
        // this.getPlaylistSubscribeFn(2)
      }
    },
    _initScroll() {
      this.srcoll = new BScroll(this.$refs.musiclist, {
        // 点击列表是否派发click事件
        click: true,
        // 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        //深针的效果，时时获取滚动高度
        probeType: 3,
      });
      // console.log(this.$refs.musiclist);
      // 使用此部分未解决
      // if (!this.srcoll) {
      //   this.srcoll = new BScroll(this.$refs.musiclist, {
      //     // 点击列表是否派发click事件
      //     click: true,
      //     // 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
      //     //深针的效果，时时获取滚动高度
      //     probeType: 3,
      //   });
      //   console.log(this.$refs.musiclist);
      // } else {
      //   this.srcoll.refresh();
      // }
    },
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this._initScroll();
      }, 3000);
    });
  },
  created() {
    this.getPlaylistDetailFn();
    
  },
};
</script>

<style lang="less" scoped>
.topheader {
  user-select: none;
  position: relative;
  height: 270px;
  .img {
    background-color: pink;
    width: 100%;
    height: 270px;
    // position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      margin: auto;
    }
  }
  .title {
    font-size: 18px;
    position: absolute;
    left: 18px;
    bottom: 18px;
    color: #fff;
  }
  .button {
    font-size: 18px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
  }
}
.musiclist {
  user-select: none;
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f2f3f4;
  width: 100%;
  border-radius: 7px;
  position: absolute;
  top: 263px;
  bottom: 0;
  overflow: hidden;
  // height: 100%;
  dt {
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    color: #454747;
    border-bottom: 1px solid #e3e3e3;
    .icon-tianjiadingdan1 {
      float: right;
      margin-right: 20px;
      box-sizing: border-box;
    }
    .reds{
      color: red;
    }
    i {
      width: 44px;
      text-align: center;
      font-style: normal;
      display: inline-block;
    }
    span {
      font-size: 14px;
      color: #797b7a;
    }
  }
  dd {
    border-bottom: 1px solid #e3e3e3;
    height: 53px;
    display: flex;
    .info {
      flex: 1;
      h2 {
        font-size: 16px;
        color: #1b1c1c;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }
      h3 {
        font-size: 12px;
        color: #929393;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }
    }
    h1 {
      flex: 0 0 44px;
      line-height: 53px;
      text-align: center;
      font-size: 16px;
      color: #6d6e6e;
    }
  }
}
</style>